<template>
	<view class="wrapper index">
		<myheader type="2"></myheader>
		<scroll-view scroll-y="true" class="main">
			<!-- 轮播图 -->
			<div class="mt30">
				<u-swiper :list="list3" indicatorMode="dot" previousMargin="60" nextMargin="60" circular
					:autoplay="true" radius="5" bgColor="#ffffff" height="267rpx" indicator
					indicatorActiveColor="#1C49D7" indicatorInactiveColor="rgba(28, 73, 215, .2)"></u-swiper>
			</div>
			<div class="page-main">
				<div class="btheme time center mt20">
					<image src="../../static/logo2.png" mode="widthFix" class="logo-icon"></image>
					<div class="f26 cfff">{{$t('consensus.title')}}</div>
				</div>
				<div class="btheme mt20 fWrap space-between f26">
					<div class="bfff posr box mb30 ctheme" v-for="v in meal" :key="v.id">
						<image src="../../static/logo1.png" mode="widthFix" class="logo1-icon posa"></image>
						<div class="flex-start mb5">
							<div class="flex1 nowrap">{{v.name}}</div>
							<text class="f18 mr30" @click="showRule(v)">{{$t('consensus.xiang')}}</text>
						</div>
						<div class="center">
							<div class="lebel">{{$t('consensus.shu')}}</div>:<div class="flex1">{{v.number}}BNB</div>
						</div>
						<div class="center">
							<div class="lebel">{{$t('consensus.shou')}}</div>:<div class="flex1">
								{{v.multiple}}{{$t('consensus.bei')}}
							</div>
						</div>
						<div class="center">
							<div class="lebel">{{$t('consensus.ti')}}</div>:<div class="flex1">{{v.ratio}}%</div>
						</div>
						<div class="center">
							<div class="lebel">{{$t('consensus.zai')}}</div>:<div class="flex1">{{v.distribution}}%
							</div>
						</div>
						<div class="btn center cfff f18" @click="buy(v)">{{$t('consensus.canyu')}}</div>
					</div>
				</div>
			</div>
		</scroll-view>
		<!-- 修改邀请人 -->
		<u-modal :show="show" closeOnClickOverlay="true" :title="$t('consensus.rule')" :showConfirmButton="false"
			@close="show=false">
			{{detail.description}}
		</u-modal>
		<!-- 套餐详细 -->
		<u-modal :show="showBuy" closeOnClickOverlay="true" :title="buyInfo.name" :showConfirmButton="false"
			@close="showBuy=false" width="500rpx">
			<div class="w100 f26 buyDetail">
				<div class="ctheme">{{$t('consensus.ke')}}BNB:{{info.money}}</div>
				<div>{{$t('consensus.shu')}}:{{buyInfo.number}}BNB</div>
				<div>{{$t('consensus.shou')}}:{{buyInfo.multiple}}{{$t('consensus.bei')}}</div>
				<div>{{$t('consensus.ti')}}:{{buyInfo.ratio}}%</div>
				<div>{{$t('consensus.zai')}}:{{buyInfo.distribution}}%</div>
				<!-- <div class="flex-start">{{$t('consensus.pei')}}:
					<u-radio-group v-model="pei" placement="row">
						<u-radio :customStyle="{marginLeft: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.id">
						</u-radio>
					</u-radio-group>
				</div> -->
				<div class="btn cfff f18 center" @click="confirmBuy">{{$t('consensus.canyu')}}</div>
			</div>
		</u-modal>
	</view>
</template>

<script>
	import {
		imgUrl
	} from '@/utils/config.js'
	import myheader from '@/components/myheader/myheader'
	export default {
		data() {
			return {
				loading: true,
				list3: [],
				show: false,
				showBuy: false,
				buyInfo: {},
				radiolist1: [{
						name: '100%',
						id: 1
					},
					{
						name: '90%',
						id: 2
					}
				],
				pei: 1,
				meal: [],
				detail:{}
			}
		},
		components: {
			myheader
		},
		onShow() {
			// 未登录前往登陆页面
			if (!uni.getStorageSync('uinfo')) {
				this.open('../login/login', 3)
			} 
			// 未初始化初始化
			if (!this.connected) {
				this.initWeb3((tpaddress) => {
					console.log(tpaddress)
				})
			}
		},
		onLoad() {
			this.info = uni.getStorageSync('uinfo')
			this.getBanner()
			this.getMeal()
		},
		methods: {
			// 查询套餐
			getMeal() {
				this.$http('index/meal').then(r => {
					console.log(r)
					this.meal = r
				})
			},
			// 查询轮播图
			getBanner() {
				this.$http('index/banner').then(r => {
					this.list3 = r.map((v) => {
						return imgUrl + v.image
					})
				})
			},
			// 确认购买
			confirmBuy() {
				this.$http('user/buyPackage', {
					pid: this.buyInfo.id
				}).then(r => {
					this.sToast('购买成功')
					this.showBuy = false
				})
			},
			// 点击参与
			buy(v) {
				this.showBuy = true
				this.buyInfo = v
			},
			showRule(v) {
				this.show = true
				this.detail=v
			}
		}
	}
</script>

<style lang="scss">
	.buyDetail {
		line-height: 1.6;

		.btn {
			width: 182rpx;
			height: 49rpx;
			background: #0090FF;
			box-shadow: 2rpx 6rpx 6rpx 6rpx rgba(160, 24, 102, .15), inset 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, .2);
			border-radius: 24rpx;
			margin: 28rpx auto 0;
			
		}
	}

	.box {
		width: 288rpx;
		height: 300rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 1rpx 6rpx 1rpx rgba(160, 24, 102, .2), inset 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, .2);
		border-radius: 30rpx;
		padding: 20rpx 0 47rpx 40rpx;
		white-space: nowrap;
		line-height: 1.5;

		.logo1-icon {
			width: 39rpx;
			height: 39rpx;
			left: 6rpx;
			top: 20rpx;
		}

		.btn {
			width: 102rpx;
			height: 39rpx;
			background: #0090FF;
			box-shadow: 2rpx 6rpx 6rpx 6rpx rgba(160, 24, 102, .15), inset 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, .2);
			border-radius: 24rpx;
			margin: 8rpx auto 0;
		}

		.f18 {
			border: 1rpx solid #0090FF;
			border-radius: 10rpx;
			padding: 0 10rpx;
		}
	}

	.logo-icon {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}

	.page-main {
		padding: 60rpx 40rpx;

		.btheme {
			box-shadow: 3rpx 1rpx 6rpx 1rpx rgba(160, 24, 102, .2);
			border-radius: 20rpx;
			padding: 20rpx 17rpx;
		}
	}

	:deep(.u-swiper) {
		overflow: initial;

		.u-swiper-indicator__wrapper__dot {
			width: 20rpx;
			height: 10rpx;
			border-radius: 5rpx;
		}

		.u-swiper__indicator {
			bottom: -30rpx;
		}
	}

	.income {
		width: 365rpx;
		height: 43rpx;
		line-height: 43rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 1rpx 6rpx 1rpx rgba(160, 24, 102, .1), inset 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, .5);
		border-radius: 16rpx;
		padding-left: 70rpx;
		color: #1D47C0;
	}

	.logo1-icon {
		width: 27rpx;
		height: 27rpx;
		top: -10rpx;
	}

	.main {
		margin-top: -100rpx;
		height: calc(100vh - 360rpx);
	}
</style>